<template>
	<view
	class="yb-popup yb-flex"
	:class="{'yb-justify-center': direction == 'center', 'yb-align-center': direction == 'center'}"
	:style="{position: optionsSync.position, visibility: isShow ? 'visible' : 'hidden'}">
		<view class="yb-mask yb-flex" :style="maskStyle" ref="ybMask" @tap="onMaskClick" v-if="maskSync.show" @touchmove.stop.prevent></view>
		<view class="yb-popup-content yb-flex" ref="ybPopupContent" :style="popupStyle" @touchmove.stop.prevent>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			direction: {
				type: String,
				default: 'bottom'
			},
			duration : {
				type: Number,
				default: 300
			},
			//是否显示，支持.sync
			visible: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		data () {
			return {
				visibleSync: false,
				isShow: false,
				maskClass: '',
				popupClass: '',
				windowWidth: 0,
				windowHeight: 0,
				popup_binding: null
			}
		},
		computed: {
			utils () {
				return Util
			},
			optionsSync () {
				return Object.assign({}, {
					mask: {},
					position: 'fixed'
				}, this.options)
			},
			maskSync () {
				return Object.assign({}, {
					show: true,
					color: 'rgba(0,0,0,.5)',
					click: true
				}, Util.typeof(this.optionsSync.mask) == 'Object' ? this.optionsSync.mask : Util.typeof(this.optionsSync.mask) == 'Boolean' ? {show: this.optionsSync.mask} : {})
			},
			maskStyle () {
				return this.filterStyle(
					{
						opacity: this.visibleSync ? 1 : 0,
						'background-color': this.maskSync.color,
						'transition-duration': this.duration + 'ms'
					}
				)
			},
			popupStyle () {
				const styles = this.direction == 'top' ? {
					position: 'absolute',
					top: 0,
					left: 0,
					right: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateY(' + (this.visibleSync ? 0 : -this.windowHeight)  + 'px)'
				} : this.direction == 'left' ? {
					position: 'absolute',
					bottom: 0,
					left: 0,
					top: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateX(' + (this.visibleSync ? 0 : -this.windowWidth) + 'px)'
				} : this.direction == 'right' ? {
					position: 'absolute',
					bottom: 0,
					right: 0,
					top: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateX(' + (this.visibleSync ? 0 : this.windowWidth) + 'px)'
				} : this.direction == 'center' ? {
					opacity: this.visibleSync ? 1 : 0,
					transform: this.visibleSync ? 'scale(1)' : 'scale(0)'
				} : {
					position: 'absolute',
					bottom: 0,
					left: 0,
					right: 0,
					opacity: this.visibleSync ? 1 : 0,
					transform: 'translateY(' + (this.visibleSync ? 0 : this.windowHeight) + 'px)'
				}
				return this.filterStyle(
					Object.assign({}, styles, {
						'transition-duration': this.duration + 'ms'
					})
				)
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowWidth = res.windowWidth
					this.windowHeight = res.windowHeight
				}
			})
		},
		mounted () {
			this.visibleSync = this.visible
		},
		beforeDestroy() {
			// #ifdef APP-NVUE
			if ( this.popup_binding ) {
				Binding.unbind({
					token: this.popup_binding.token,
					eventType: 'timing'
				})
				this.popup_binding = null
			}
			// #endif
			// #ifndef APP-NVUE
			if ( this.popupTimer ) {
				clearTimeout(this.popupTimer)
				this.popupTimer = null
			}
			// #endif
		},
		methods: {
			show () {
				this.isShow = true
				this.$emit('show')
				this.$emit('update:visible', true)
			},
			hide () {
				setTimeout(() => {
					this.$emit('hide')
					this.$emit('update:visible', false)
					this.isShow = false
				}, this.duration)
			},
			onMaskClick () {
				this.visibleSync = false
			}
		},
		watch: {
			visible (newVal) {
				this.visibleSync = newVal
			},
			visibleSync (newVal) {
				if ( newVal ) this.show()
				else { this.hide() }
			}
		}
	}
</script>

<style scoped>
	.yb-popup {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		pointer-events: none;
		z-index: 9;
		/* #endif */
	}
	.yb-popup-content {
		/* #ifndef APP-NVUE */
		pointer-events: auto;
		/* #endif */
		opacity: 0;
		transition-property: transform, opacity;
	}
	.yb-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		/* #ifndef APP-NVUE */
		pointer-events: auto;
		/* #endif */
		transition-property: opacity;
	}
</style>
